<template>
  <div>
    <el-dialog
      title="设置岗位"
      :visible.sync="dialogVisible"
      width="450px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form :model="addForm" :rules="rules" ref="refForm" label-width="80px">
        <el-form-item size="small" label="岗位">
          <el-select
            v-model="addForm.role"
            placeholder="请选择岗位"
            style="width: 100%"
            size="small"
          >
            <el-option
              v-for="item in roleList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button">取 消</el-button>
        <el-button
          size="small"
          @click="submit"
          v-preventReClick="1000" class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { reqTurnOver } from "@api/api.js";
import { mapState } from "vuex";
export default {
  props: ["editInfo", "orgId"],
  mixins: [],
  data() {
    return {
      roleList: [
        {
          id: "1",
          name: "管理员",
        },
        {
          id: "2",
          name: "消防安全专员",
        },
        {
          id: "3",
          name: "消防安全负责人",
        },
        {
          id: "4",
          name: "消防监管人",
        },
        {
          id: "5",
          name: "专职消防安全管理人",
        },
        {
          id: "6",
          name: "楼(建筑)长",
        },
        {
          id: "7",
          name: "维保人员",
        },
      ],
      dialogVisible: false,
      addForm: {
        role: "",
      },
      rules: {
        role: [
          {
            required: true,
            message: "请选择岗位",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    dialogVisible(e) {
      if (e) {
        this.addForm.role = this.editInfo.role;
      }
    },
  },
  methods: {
    // 点击新增
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        // this.$modal.notifyWarning("请检查输入信息是否有误");
        if (!valid) return;
        const res = await reqTurnOver({
          orgId: this.orgId,
          userId: this.editInfo.userId,
          role: this.addForm.role,
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("设置成功！");
        if (this.user.roleName == "ORG_ADMIN" && this.addForm.role == "1") {
          this.$parent.editState(); //如果是普通管理员，把单位设置给其他成员,单位列表管理员图标隐藏
        }
        this.closeDialog();
        this.$parent.getInitDataList();
      });
    },

    // 点击关闭弹框
    closeDialog() {
      this.$refs.refForm.resetFields();
      this.dialogVisible = false;
      this.addForm = {
        role: "",
      };
    },
  },
  deactivated() {
    if(this.$refs.refForm!=null){
      this.closeDialog();
    }
  },
};
</script>
  
<style lang="less" scoped>
@import url("../../common.less");
</style>
  